<!--
	v-model : 当前激活的菜单name 
	<tabPane name="" label=""></tabPane> name 用来判断激活状态  label表示菜单名称  
-->
<template>
	<div>
		<TabNav style="z-index:1" :class="type?type:'' " :onTabClick="onTabClick" :panes="panes" :activeName="value||activeName" ref="nav"></TabNav>
		<div class="top-div" v-show="type=='top-fixed'"></div>
		<div class="tab-content-out"><slot></slot></div>
	</div>
</template>
<script>
	import TabNav from './TabNav';
	export default{
		props:{
			activeName:String,
			value:{},
			type:{
				type:String,
				default:""
			}
		},
		watch: {
			value(value){
				this.$emit('input', value);
			}
		},
		components:{
			TabNav
		},
		data(){
			return {
				panes:[]
			}
		},
		methods:{
			addPanes(item) {
	        	const index = this.$slots.default.indexOf(item.$vnode);
	        	this.panes.splice(index, 0, item);
	      	},
			setItemArr(){

			},
			setValue(value){
				this.$emit('input', value);
			},
			onTabClick(item){
				this.setValue(item.name||"");
				this.$emit('tab-click',item);
			}
		}
	}
</script>
<style scoped>

	.top-fixed{position: fixed;width: 100%;top: 0;left: 0;box-shadow: 0 6px 10px 0 rgba(195,195,195,0.22);background: #FFF;}
	.top-fixed1{position: absolute;width: 100%;top:0;left: 0;background:#F8F8F8;}
	.top-div{height: 74px;}
</style>